<template>
  <div class="app-container"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-2 w-100 d-flex">
      <!-- 2号楼1层饮水机智能控制设置 -->
      <div class="h-100 w-4 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">体育馆开关智能控制设置</div>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-between item_content pt-3">
            <div v-for="(item,index) in oneRsDataList" :key="item.id"
                 class="h-100 width-48 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 w-35 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="oneRsStatusList[index]==1?ysj_open:ysj_close"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 w-65 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>体育馆使用时段{{index + 1}}</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(item,'one')"
                          v-model="item.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="w-30">开启时间：</div>
                    <div class="w-70">
                      <el-time-picker
                        @change="updateRule(item,'one')"
                        v-model="item.openTime"
                        size="small"
                        style="width: 100%;"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                  <div class="d-flex-center">
                    <div class="w-30">关闭时间：</div>
                    <div class="w-70">
                      <el-time-picker
                        @change="updateRule(item,'one')"
                        v-model="item.closeTime"
                        size="small"
                        style="width: 100%;"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(item,'one')">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 2号楼1层饮水机智能控制设置 -->
      <div class="h-100 width-18 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">体育馆控制</div>
            </div>
          </div>
          <div class="item_content pt-3">
            <div class="w-100 h-100" v-for="(item,index) in deviceDataList" :key="index">
              <div class="h-100 w-100 p10 border_two over-hidden" :class="dataCardBgColor[item.socketColor]"
                   @click="setStatusByDevice(item)">
                <div class="height33 font-white ml-1">{{'体育馆总控'}}</div>
                <div class="height97 w-100 d-flex-center">
                  <el-image class="img_size_144" :src="z_control" fit="cover"></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 选择星期 -->
    <yc-dialog ref="weekDialog" :dialogTitle="dialogTitle" :showCenter="false" dialog-width="30%">
      <template #content>
        <div class="w-100 h-100 controlDialog">
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3 font-18 white">
              <div class="line mr-2"></div>
              <div>选择开始星期</div>
            </div>
            <div class="d-flex">
              <div class="mr-3 p-2 week_normal white radius50 week"
                   :class="weekObj.opWeekDay.indexOf(itemY.value) != -1 ? 'week_check' : ''"
                   v-for="(itemY,indexY) in weekData"
                   :key="itemY.value" @click="handleClickWeek2(itemY.value)">{{itemY.name}}
              </div>
            </div>
          </div>
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3 font-18 white">
              <div class="line mr-2"></div>
              <div>选择结束星期</div>
            </div>
            <div class="d-flex">
              <div class="mr-3 p-2 week_normal white radius50 week"
                   :class="weekObj.clWeekDay.indexOf(itemY.value) != -1 ? 'week_check' : ''"
                   v-for="(itemY,indexY) in weekData"
                   :key="itemY.value" @click="handleClickWeek1(itemY.value)">{{itemY.name}}
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="saveWeekButton(weekObj)">确定</el-button>
        <el-button @click="$refs.weekDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog/index"
  import { batchControl, queryPicLight, queryRule, updateRuleV2, queryTYGDevice } from "@/api/user"
  import { makeDeviceControl } from "@/api/dormOneBuildingOneFloor/electricityManagement";

  export default {
    components: {ycDialog},
    data() {
      return {
        ysj_open: require('@/assets/img/ysj_open.png'),
        ysj_close: require('@/assets/img/ysj_close.png'),
        week: require('@/assets/img/week.png'),
        z_control: require('@/assets/img/z_control.png'),

        timeout: [],

        oneRsDataList: [],
        oneRsStatusList: [],

        deviceDataList: [],
        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],

        weekData: [
          {name: '一', value: 'MONDAY'},
          {name: '二', value: 'TUESDAY'},
          {name: '三', value: 'WEDNESDAY'},
          {name: '四', value: 'THURSDAY'},
          {name: '五', value: 'FRIDAY'},
          {name: '六', value: 'SATURDAY'},
          {name: '日', value: 'SUNDAY'},
        ],
        weekObj: {
          id: '',
          isUse: '',
          openTime: '',
          closeTime: '',
          opWeekDay: [],
          clWeekDay: [],
        },
        typeIndex: "",
        dialogTitle: "",
        addOrUpdateLoading: false,

        loading: false,
      }
    },
    created() {
      this.queryRuleOne()

      this.queryPicLightOne()
      this.queryTYGDevice()
    },
    mounted() {
      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryPicLightOne()
        _this.queryTYGDevice()
      }, 10000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryRuleOne() {
        queryRule({
          areaCode: 'tyg',
          timeType: 'tyg'
        }).then(res => {
          let tempData = res.object
          this.oneRsDataList = tempData.tyg
        })
      },

      queryPicLightOne() {
        queryPicLight({
          areaCode: 'tyg',
          timeType: 'tyg'
        }).then(res => {
          let tempData = res.object
          this.oneRsStatusList = tempData
        })
      },
      queryTYGDevice() {
        queryTYGDevice().then(res => {
          let tempData = res.object
          this.deviceDataList = tempData
        })
      },


      updateRule(data, typeIndex) {
        updateRuleV2({
          id: data.id,
          isUse: data.isUse,
          openTime: data.openTime,
          closeTime: data.closeTime,
          opWeekDay: data.opWeekDay,
          clWeekDay: data.clWeekDay,
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.refresh(typeIndex)
          } else {
            this.refresh(typeIndex)
          }
        })
      },

      refresh(typeIndex) {
        this.queryRuleOne()
      },


      openWeekDialog(data, typeIndex) {
        this.weekObj.id = data.id
        this.weekObj.isUse = data.isUse
        this.weekObj.openTime = data.openTime
        this.weekObj.closeTime = data.closeTime
        this.weekObj.opWeekDay = data.opWeekDay ? data.opWeekDay.split(',') : []
        this.weekObj.clWeekDay = data.clWeekDay ? data.clWeekDay.split(',') : []

        this.dialogTitle = '选择星期'
        this.typeIndex = typeIndex

        this.addOrUpdateLoading = false
        this.$refs.weekDialog.dialogVisible = true
      },

      handleClickWeek2(val) {
        let num = this.weekObj.opWeekDay.indexOf(val)
        if (num == -1) {
          this.weekObj.opWeekDay.push(val)
        } else {
          this.weekObj.opWeekDay.splice(num, 1)
        }
      },
      handleClickWeek1(val) {
        let num = this.weekObj.clWeekDay.indexOf(val)
        if (num == -1) {
          this.weekObj.clWeekDay.push(val)
        } else {
          this.weekObj.clWeekDay.splice(num, 1)
        }
      },

      saveWeekButton(data) {
        this.addOrUpdateLoading = true
        updateRuleV2({
          id: data.id,
          isUse: data.isUse,
          openTime: data.openTime,
          closeTime: data.closeTime,
          opWeekDay: data.opWeekDay.join(','),
          clWeekDay: data.clWeekDay.join(','),
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.refresh(this.typeIndex)
            this.$refs.weekDialog.dialogVisible = false
          }

          this.addOrUpdateLoading = false
        })
      },


      setStatusByDevice(data) {
        this.dataItem = data

        let obj = {}
        if (data.deviceList[data.deviceList.length - 2].deviceValue == '0') {
          obj = {
            command: '65365',
            commandName: '合闸',
            parameterCode: 'CTRL',
          }
        } else {
          obj = {
            command: '65280',
            commandName: '分闸',
            parameterCode: 'CTRL',
          }
        }
        this.editControl(obj, 'other')
      },
      editControl(data, type) {
        let titleName = '确定执行此操作吗, 是否继续?'
        if (type == 'other') {
          if (data.commandName == '合闸') {
            titleName = '确定执行合闸操作吗, 是否继续?'
          } else {
            titleName = '确定执行分闸操作吗, 是否继续?'
          }
        }
        this.$confirm(titleName, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {

          makeDeviceControl({
            deviceCode: this.dataItem.deviceCode,
            parameterCode: data.parameterCode,
            command: data.command,
            commandName: data.commandName,
          }).then(res => {
            if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {
              setTimeout(() => {
                this.queryTYGDevice()
                this.$message({
                  type: "success",
                  message: res.message
                })
              }, 2000)
            }
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .width-18 {
    width: 18%;
  }

  .width-48 {
    width: 49%;
  }

  .w-35 {
    width: 35%;
  }

  .w-65 {
    width: 65%;
  }

  .item_width {
    width: 70px;
  }

  .item_height {
    height: 70px;
  }

  .item_bg_open {
    background-color: #1AA652;
    cursor: pointer;
  }

  .item_bg_open:hover {
    transform: scale(1.05);
  }

  .item_bg_danger {
    background-color: #df547b;
    cursor: pointer;
  }

  .item_bg_danger:hover {
    transform: scale(1.05);
  }

  .item_bg_close {
    background-color: #7A7A7A;
    cursor: pointer;
  }

  .item_bg_close:hover {
    transform: scale(1.05);
  }

  .item_bg_blue {
    background: #2C637A;
    cursor: pointer;
  }

  .item_bg_blue:hover {
    transform: scale(1.05);
  }

  .item_bg_warning {
    background: #B3A12F;
    cursor: pointer;
  }

  .item_bg_warning:hover {
    transform: scale(1.05);
  }

  .bg-index-red {
    background: #AF1F1F;
    cursor: pointer;
  }

  .bg-index-red：hover {
    transform: scale(1.05);
  }

  ::v-deep .el-radio-group .el-radio__label {
    color: #ffffff !important;
  }

  .border_two {
    border-radius: 6px;
  }

  .height33 {
    height: 20px;
  }

  .height97 {
    height: calc(100% - 20px)
  }

  .img_size_144 {
    width: 110px;
    height: 110px;
  }

  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .white {
    color: #ffffff;
  }

  .line {
    width: 5px;
    height: 20px;
    background-color: #1A8B9A;
    border-radius: 4px;
  }

  .week_normal {
    cursor: pointer;
    background-color: #335358;
  }

  .week_check {
    cursor: pointer;
    background-color: #1A8B9A;
  }
</style>
